<template>
	<view class="fafa">
	
	
	<scroll-view class="barr_view" scroll-y="true" :show-scrollbar="showScrollbar" scroll-with-animation="true" :scroll-into-view="scrollIntoView">
		 
		 <view class="pl-kuangs">
			<text class="name-aut" style="color:rgb(0,217,255);">欢迎来到直播间!飞猪严禁未成年人直播或直播间内严禁出现违法违规、低俗色打赏。情、吸烟酗酒、人身伤害等内容。
			如主播在直播过程中以不当方式诱导打赏、私下交家注意财产安全，易，请谨慎判断，以防人身财产损失。请大骗。</text>
		 </view>
		<view :id="'danmu'+item.id" class="pl-kuang" v-for="(item,index) in list" :key="index">
			<text class="name-aut">{{item.Username}}：</text>
			<text class="nei-rong">{{item.Content}}</text>
		</view>
	</scroll-view>
	<view class="iop-st">
		
	</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				list: [{
					id:0,
			 		Username: '发送人',
					Content: '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',
			 	}],//测试数据
				scrollIntoView:"",//至于底部 这个有点特殊 （简单点的意思就是 不能以数字开头 可以这样写；"id"+id,拼接） 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
				showScrollbar:false,
			}
		},
		created() {
			let id = 1;
			setInterval(() => {
				
				this.list.push({
					id:id,
					Username: '发送人',
					Content: '哈哈哈哈哈哈啊哈哈456465465465',
				})
				id++;
				
				this.bot()
				// this.autoHide()
			}, 6000)
		},
		methods: {
			//自动消失
			autoHide() {
				if (this.list.length) {
					setTimeout(()=>{
						this.list.splice(0,1);
					},5000)
				}
			},
			//至于底部
			bot(){
				setTimeout(()=>{
					let len = this.list.length;
					if(len > 0 && this.list[len - 1]){
						this.scrollIntoView = 'danmu'+ this.list[len - 1].id;
					}
				},200)
				
			},
			//px 转换 rpx
			pxToRpx(shuzhiH) {
				//获取当前屏幕宽度
				let deviceWidth = uni.getSystemInfoSync().windowWidth;
				let rpxs = (750 / deviceWidth) * shuzhiH
				return Math.floor(rpxs);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fafa{
		width: 710rpx;
		height: 400rpx;
		position: relative;
	}
	.iop-st{
		width: 710rpx;
		height: 50rpx;
		z-index: 10;
		-webkit-mask: linear-gradient(transparent,#fff);
		position: absolute;
	}
	.barr_view{
		width: 710rpx;
		height: 400rpx;
		/* #ifndef APP-PLUS-NVUE */
		mask: linear-gradient(transparent, #000 20%);
		// mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%);
		// 
		/* #endif */
	}
	
	.pl-kuangs{
		width: 550rpx;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 15rpx;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 18rpx 18rpx;
		border-radius: 20rpx;
	}
	.pl-kuang{
		width: 550rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 15rpx;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 18rpx 18rpx;
		border-radius: 20rpx;
		line-height: 30rpx;
	}
	.name-aut{
		font-size: 30rpx;
		color: #3cc5ff;
	}
	.nei-rong{
		// width: 400rpx;
		font-size: 30rpx;
		color: #fff;
		/* #ifndef APP-PLUS-NVUE */
		word-break: break-all;
		/* #endif */
	
				
	}
</style>